import React from 'react'
import { useNavigate } from 'react-router-dom'
import { InfiniteScroll, List } from 'antd-mobile'
// 导入数据类型
import { listItem } from '@/types/dataTypes'
type Props = {
  loadMore: () => any, //要定义接收的props的属性的类型，loadMore是函数，返回值不确定，所以填any
  hasMore: boolean   //hasMore是布尔类型
  listData: Array<listItem>
}

export default function ListCom(props: Props) {
  const navigate = useNavigate()
  return (
    <div className='listbox'>
      {/* InfiniteScroll 无限滚动  列表滚动到底部自动加载更多数据。用户想看到新的数据时，可以上滑页面自动加载数据。*/}
      <List>
        {props.listData.map((item, index) => (
          <List.Item key={index} onClick={() => {
            // 跳转到详情页  使用useNavigate跳转传参，restful风格传参 navigate('路径'+item.proid) 字符串会拼接,要配合路由表动态路由
            navigate('/detail/' + item.proid)
          }}
          >
            <img src={item.img1} alt="" />
            <p className='desc'>{item.desc}</p>
            <p className='price'>${item.sales}</p>
          </List.Item>
        ))}
      </List>
      <InfiniteScroll loadMore={props.loadMore} hasMore={props.hasMore} />
    </div>
  )
}